<template>
    <el-menu
      class="el-menu-vertical-demo"
      width="200px"
      background-color="#494949" active-text-color="#409eff"
      text-color="#fff"
      router unique-opened
      :collapse="isCollage" :default-active="currentMenu">

        <!-- <h5 v-show="!isCollage">审批流后台管理系统</h5> -->
        <!-- <h5 v-show="isCollage"><img src="../assets/images/logo/heima.png" alt=""> </h5> -->
        <div class="logo_content">
          <div class="img_logo">
              <img src="../assets/images/logo/logo3.png" alt="">
          </div>
        </div>

        <span class="cllapse" @click="collapseMenu">@</span>

        <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>

        <el-submenu :index="index+''" v-for="(item, index) in hasChildren" :key="index">
            <template slot="title">
              <i :class="'el-icon-' + item.icon"></i>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">
                    <i :class="'el-icon-' + subItem.icon"></i>
                    <span >{{subItem.label}}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>

    </el-menu>

</template>

<script>
export default {
  computed: {
    noChildren () {
      return this.asideMenu.filter(item => !item.children)
    },
    hasChildren () {
      return this.asideMenu.filter(item => item.children)
    },
    isCollage () {
      return this.$store.state.tab.isCollapse
    },
    currentMenu () {
      return this.$store.state.tab.currentMenu.path
    }
  },
  data () {
    return {
      // 激活的链接地址
      asideMenu: [
        {
          path: '/LeaveApplication',
          name: 'LeaveApplication',
          label: '请假申请',
          plabel: '',
          icon: 'alarm-clock'
        },
        {
          path: '/ContractApplication',
          name: 'ContractApplication',
          label: '合同申请',
          plabel: '',
          icon: 'document-copy'
        },
        {
          path: '/ConfidentialityAgreement',
          name: 'ConfidentialityAgreement',
          label: '保密协议',
          plabel: '',
          icon: 'lock'
        },
        {
          path: '/KeyApplication',
          name: 'KeyApplication',
          label: '密钥申请',
          plabel: '',
          icon: 'key'
        },
        {
          path: '/demo',
          name: 'demo',
          label: '密钥申请',
          plabel: '',
          icon: 's-home'
        }

        // {
        //   label: '审批管理',
        //   icon: 'user',
        //   children: [
        //     {
        //       path: '/users',
        //       name: 'users',
        //       plabel: '审批管理',
        //       label: '审批记录',
        //       icon: 'menu'
        //     },
        //     {
        //       path: '/users1',
        //       name: 'users1',
        //       plabel: '审批管理',
        //       label: '审批统计',
        //       icon: 'menu'
        //     }
        //   ]
        // }
      ]
    }
  },
  methods: {
    // 点击菜单，vuex中保存菜单项
    clickMenu (item) {
      this.$store.commit('selectMenu', item)
      // 更改tab后更新tablist到sessionStorage
      sessionStorage.setItem('tabList', JSON.stringify(this.$store.state.tab.tabList))
      // 保存链接的激活状态
      sessionStorage.setItem('currentMenu', JSON.stringify(item))
    },
    // 根据sessionStroage里返回的UserRole，来显示管理栏
    createMenu () {
      const userRole = JSON.parse(sessionStorage.getItem('UserRole'))
      if (userRole) {
        // console.log(userRole)
        console.log(this.asideMenu)
        // 过滤权限没有的管理项
        this.asideMenu = this.asideMenu.filter((item, index) => {
          if (userRole[index]) {
            if (userRole[index].Name === item.label) {
              // 权限名，访问路径，由返回的数据设置
              item.name = userRole[index].Code
              item.path = '/' + userRole[index].Code
              item.label = userRole[index].Name
              return true
            }
          }
        })
        // console.log(this.asideMenu)
      }
    },
    // 菜单栏折叠控制
    collapseMenu () {
      this.$store.commit('collapseMenu')
    }
  },
  created () {
    this.createMenu()
    if (JSON.parse(window.sessionStorage.getItem('currentMenu'))) {
      this.$store.state.tab.currentMenu = JSON.parse(window.sessionStorage.getItem('currentMenu'))
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu{
    position: relative;
    height: 100%;
    border: none;
    overflow: hidden;
    .logo_content{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
        .img_logo{
          img{
            height: 100%;
            width: 188px;
          }
        }
    }

    h5 {
        margin: 0;
        background: #2b2f3a;
        color: #fff;
        font-size: 20px;
        font-weight: normal;
        text-align: center;
        line-height: 50px;
    }
    // /deep/.el-icon-arrow-down {
    //   right: 50px;
    // }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.cllapse{
    position: absolute;
    width: 25px;
    height: 50px;
    line-height: 50px;
    background: rgba($color: #ffffff, $alpha: 0.2);
    color: rgb(155, 155, 155);
    cursor: pointer;
    z-index: 9;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    top: 40%;
    right: 0;
    transform: translate(12px, -50%);
    transition: all .3s;
}
.cllapse:hover {
    transform: translate(0px, -50%);
}

</style>
